import { notFound } from 'next/navigation';
import Image from 'next/image';
import { getHeroById, getItemName, getAllHeroes } from '@/lib/data'; // Import data loading functions

export default async function HeroDetailPage({ params }: { params: { heroId: string } }) {
  const hero = getHeroById(params.heroId); // Load hero data using the utility function

  if (!hero) {
    notFound(); // If hero not found, show 404 page
  }

  // Fetch item names asynchronously for recommended builds
  const buildNamesPromises = hero.recommended_builds.map(build =>
    Promise.all(build.map(itemId => getItemName(itemId)))
  );
  const buildNames = await Promise.all(buildNamesPromises);

  return (
    <div className="bg-white shadow-lg rounded-lg p-8">
      {/* Hero Basic Info */}
      <div className="flex flex-col md:flex-row items-center md:items-start gap-8 mb-8">
        <div className="relative w-32 h-32 md:w-48 md:h-48 rounded-full overflow-hidden border-4 border-blue-500 flex-shrink-0">
          {/* Placeholder for actual image */}
          <div className="absolute inset-0 flex items-center justify-center bg-gray-300">
            <span className="text-gray-600">{hero.name}头像</span>
          </div>
        </div>
        <div>
          <h1 className="text-4xl font-bold mb-2">{hero.name} <span className="text-2xl text-gray-600">{hero.title}</span></h1>
          <div className="flex flex-wrap gap-2 mb-4">
            {hero.roles.map(role => (
              <span key={role} className="px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">
                {role}
              </span>
            ))}
          </div>
          <p className="text-gray-700 italic">{hero.story}</p>
        </div>
      </div>

      {/* Skills */}
      <div className="mb-8">
        <h2 className="text-2xl font-bold mb-4 border-b pb-2">技能介绍</h2>
        <div className="space-y-6">
          {hero.skills.map(skill => (
            <div key={skill.name} className="flex items-start gap-4">
              <div className="relative w-16 h-16 rounded border flex-shrink-0 bg-gray-200">
                {/* Placeholder for actual skill icon */}
                <div className="absolute inset-0 flex items-center justify-center">
                  <span className="text-xs text-gray-500">图标</span>
                </div>
              </div>
              <div>
                <h3 className="font-semibold text-lg">{skill.name}</h3>
                <p className="text-gray-600">{skill.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Recommended Builds */}
      <div className="mb-8">
        <h2 className="text-2xl font-bold mb-4 border-b pb-2">推荐出装</h2>
        {hero.recommended_builds.map((build, index) => (
          <div key={index} className="mb-4">
            <h3 className="font-semibold mb-2">方案 {index + 1}</h3>
            <div className="flex flex-wrap gap-2">
              {build.map((itemId, itemIndex) => (
                <div key={itemId} className="flex flex-col items-center w-16">
                  <div className="relative w-12 h-12 rounded border bg-gray-200 mb-1">
                    {/* Placeholder for actual item icon */}
                    <div className="absolute inset-0 flex items-center justify-center">
                      <span className="text-xs text-gray-500">图标</span>
                    </div>
                  </div>
                  <span className="text-xs text-center truncate w-full">{buildNames[index][itemIndex]}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Skins */}
      <div>
        <h2 className="text-2xl font-bold mb-4 border-b pb-2">皮肤展示</h2>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {hero.skins.map(skin => (
            <div key={skin.name} className="rounded overflow-hidden shadow">
              <div className="relative h-48 bg-gray-200">
                {/* Placeholder for actual skin image */}
                <div className="absolute inset-0 flex items-center justify-center bg-gray-300">
                  <span className="text-gray-600">{skin.name}</span>
                </div>
              </div>
              <p className="text-center p-2 bg-white text-sm">{skin.name}</p>
            </div>
          ))}
        </div>
      </div>

    </div>
  );
}

// Add generateStaticParams so Next.js knows which heroes to generate static pages for
export async function generateStaticParams() {
  const heroes = getAllHeroes(); // Load all heroes to get their IDs
  return heroes.map(hero => ({
    heroId: hero.id,
  }));
}
